<template>
  <!-- 全局配置页面 -->
  <div class="m-view-paramSetting m-window" v-loading="pageLoading">
    <el-tabs @tab-click="tabClick" v-model="tabValue" type="border-card">
      <el-tab-pane label="订单管理" name="order" v-if="configItems.order.length>0">
        <div class="m-tabContent">
          <div class="contentItem" v-for="(item,index) in configItems.order">
            <div class="itemName">{{item.paramName}}</div>
            <div class="itemValue">
              <v-switch v-model="item.paramValue" v-if="item.type=='radio'" :ref="item.paramCode"></v-switch>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="对账管理" name="account" v-if="configItems.account.length>0">
        <div class="m-tabContent">
          <div class="contentItem" v-for="(item,index) in configItems.account">
            <div class="itemName">{{item.paramName}}</div>
            <div class="itemValue">
              <v-switch v-model="item.paramValue" v-if="item.type=='radio'" :ref="item.paramCode"></v-switch>
              <div v-if="item.type=='day_range'">
                每月&nbsp;
                <el-input
                  type="text"
                  placeholder
                  v-model.number="item.paramValue.startDay"
                  maxlength="2"
                  class="day-input"
                  @keyup.native="validInputValue(item.paramValue,'startDay')"
                ></el-input>&nbsp;&nbsp;日 ~
                <el-input
                  type="text"
                  placeholder
                  v-model.number="item.paramValue.endDay"
                  maxlength="2"
                  class="day-input"
                  @keyup.native="validInputValue(item.paramValue,'endDay')"
                ></el-input>&nbsp;&nbsp;日
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="系统管理" v-if="configItems.system.length>0">系统管理</el-tab-pane>
      <el-tab-pane label="其他" v-if="configItems.other.length>0">其他</el-tab-pane>
    </el-tabs>
    <!-- 底部保存按钮 -->
    <div class="page-footer">
      <el-button @click="cancelEdit">取消</el-button>
      <el-button type="primary" @click="saveConfigValue">保存</el-button>
    </div>
  </div>
</template>

<script>
import Switch from '@/components/switch'
import Msg from "@/public/message"
export default {
  data () {
    return {
      value1: 1,
      value2: false,
      tabValue: 'order',
      // 数据加载状态   
      pageLoading: false,
      // 配置项枚举   
      configItems: {
        order: [
          {
            paramCode: 'order_isPrintOrderRemark',
            paramName: '送货单打印时，打印的备注是否是订单备注',
            paramValue: false,
            ownerCode: '',
            type: 'radio',
            userType: 4
          },
          //   {
          //     paramCode: 'order_isPrintPriceMoney',
          //     paramName: '送货单打印时，是否显示单价和金额',
          //     paramValue: true,
          //     ownerCode: '',
          //     type: 'radio',
          //     userType: 4
          //   },
          {
            paramCode: 'order_autoConfirmOrder',
            paramName: '是否自动确认采购订单',
            paramValue: false,
            ownerCode: '',
            type: 'radio',
            userType: 4
          },
          {
            paramCode: 'order_autoReleaseOrder',
            paramName: '是否自动发布采购订单',
            paramValue: true,
            ownerCode: 'lessoUser',
            type: 'radio',
            userType: 1
          }
        ],
        account: [
          //   {
          //     paramCode: 'account_updateDifferenceMoney',
          //     paramName: '是否允许手工修改差异金额',
          //     paramValue: true,
          //     ownerCode: 'lessoUser',
          //     type: 'radio',
          //     userType: 1
          //   },
          {
            paramCode: 'account_accountReconciliationDate',
            paramName: '供应商会计对账期间',
            paramValue: {
              startDay: 1,
              endDay: 15
            },
            ownerCode: 'lessoUser',
            type: 'day_range',
            userType: 1
          },
        ],
        system: [],
        other: []
      },
      accountType: ''
    }
  },
  props: {
    removeTab: {
      type: Function
    }
  },
  beforeMount () {
    this.accountType = this.$global.user.userTypeId
    Object.keys(this.configItems).forEach(item => {
      this.configItems[item] = this.configItems[item].filter(item => {
        //   根据用户类型筛选配置项
        return item.userType == this.accountType
      })
      if (this.accountType == 4) {
        this.configItems[item].forEach(item => {
          item.ownerCode = this.$global.supplierData.supplierCode
        })
      }
    })
    this.getConfigValue('order')
  },
  methods: {
    //   取消修改
    cancelEdit () {
      this.removeTab()
    },
    // tab组件被选中回调
    tabClick (val) {
      const { name } = val
      this.getConfigValue(name)
    },
    // 获取配置项的值
    getConfigValue (type) {
      let params = {
        codeList: [],
        ownerCode: this.accountType == 1 ? 'lessoUser' : this.$global.supplierData.supplierCode
      }
      params.codeList = this.configItems[type].map(item => {
        return item.paramCode
      })
      this.pageLoading = true
      this.$http.getParamsValue(params).then(({ data }) => {
        this.pageLoading = false
        if (data.code == 1) {
          let rows = data.rows
          rows.forEach(row => {
            this.configItems[type].forEach(item => {
              if (row.paramCode == item.paramCode) {
                item.paramValue = JSON.parse(row.paramValue)
              }
            })
          })
        } else {
          Msg.showErrorMsg(data.info)
        }
      }).catch(err => {
        this.pageLoading = false
        Msg.showErrorMsg(err.data.message)
      })
    },
    // 保存修改的配置值
    saveConfigValue () {
      let params = []
      // 提取所有配置项的集合
      let allConfigs = []
      Object.keys(this.configItems).forEach(key => {
        allConfigs = [...this.configItems[key], ...allConfigs]
      })
      for (let i in allConfigs) {
        const { paramCode, paramName, paramValue, ownerCode } = allConfigs[i]
        if (paramCode == 'account_accountReconciliationDate') {
          if (paramValue.startDay == '') {
            this.$message.error('对账开始日期不能为空！')
            return
          } else if (paramValue.endDay == '') {
            this.$message.error('对账截止日期不能为空！')
            return
          }
        }
        params.push({
          paramCode,
          paramName,
          paramValue: typeof (paramValue) == "object" && paramValue != null ? JSON.stringify(paramValue) : paramValue,
          ownerCode,
          modifyerId: this.$global.user.id,
          modifyer: this.$global.user.employeeName
        })
      }
      this.pageLoading = true
      this.$http.saveParamsValue(params).then(({ data }) => {
        this.pageLoading = false
        if (data.code == 1) {
          Msg.showSuccessMsg('保存成功')
          this.getConfigValue(this.tabValue)
        } else {
          Msg.showErrorMsg(data.info)
        }
      }).catch(err => {
        this.pageLoading = false
        Msg.showErrorMsg(err.data.message)
      })
    },
    // 校验输入值
    validInputValue (pramaValue, type) {
      const { startDay, endDay } = pramaValue
      pramaValue[type] = pramaValue[type].toString().replace(/\D/g, '')
      if (pramaValue[type] < 1 || pramaValue[type] > 31) {
        pramaValue[type] = ''
      } else if (startDay != '' && endDay != '' && startDay > endDay) {
        this.$message.error('开始日期不能大于截止日期！')
        pramaValue[type] = ''
      }
    }
  },
  components: {
    'v-switch': Switch
  }
}
</script>

<style>
</style>